Allow conversion of rem font size to pixels in typography presets #1304
Conversation
|
|
Tip Once this PR is ready to go, add the This saves us a lot of money by not running the tests before we need them. |
jamesmockett
changed the title
jamesmockett
force-pushed
the
jm/type-preset-px
branch
from
90b8beb
to
d4e7754
Compare
jamesmockett
force-pushed
the
jm/type-preset-px
branch
from
11b8cf8
to
751bc9b
Compare
jamesmockett
force-pushed
the
jm/type-preset-px
branch
from
806bd2b
to
bf339b2
Compare
jamesmockett
force-pushed
the
jm/type-preset-px
branch
from
bf339b2
to
7a98a77
Compare
| const matches = preset.match(REGEX_FONT_SIZE); | ||
| if (matches?.[1]) { | ||
| const pxVal = parseFloat(matches[1]) * 16; | ||
| return preset.replace(REGEX_FONT_SIZE, `font-size: ${pxVal}px`); | ||
| } | ||
|
|
||
| return preset; |
There was a problem hiding this comment.
You can also use a replacer function as part of String.prototype.replace, which could make this simpler:
return preset.replace(REGEX_FONT_SIZE, (_, match) => {
const pxValue = parseFloat(match) * 16;
return `font-size: ${pxValue}px`;
})
| * Convert `font-size` value in typography preset from rem to px | ||
| */ | ||
| export const presetToPx = (preset: TypographyPreset) => { | ||
| const REGEX_FONT_SIZE = /font-size:\s(\d+\.\d+)rem/; |
There was a problem hiding this comment.
I think you might have an issue if the value does not contain a decimal part… Thankfully we currently do not use 16px, 32px or 48px as a font size, but we might in the future!
| const REGEX_FONT_SIZE = /font-size:\s(\d+\.\d+)rem/; | |
| const REGEX_FONT_SIZE = /font-size:\s(\d+\.?\d*)rem/; |
|
|
||
| const matches = preset.match(REGEX_FONT_SIZE); | ||
| if (matches?.[1]) { | ||
| const pxVal = parseFloat(matches[1]) * 16; |
There was a problem hiding this comment.
This nombre magique is exposed as rootPixelFontSize in ./convert-value. Shall we pull it in here?
|
Thanks the comments @mxdvl and @SiAdcock 🙏 We've realised that people don't seem to be using the existing API's |
What are you changing?
Adds
presetToPxhelper to convert default rem font size in a given typography preset to a pixel value. Line height is untouched as this is already specified as a unitless relative value.Why?
We want to encourage use of rem font sizes so rather than duplicating all of the presets with different units a conversion function provides a pixel equivalent where strictly necessary.
👇
Notes
This adds a
TypographyPresettype to define the shape of a preset, but this hasn't been applied to the presets themselves as it hides the underlying values of the properties with the expected type:With untyped presets the values are exposed: